import React from 'react';
import { Box, Button, Tooltip } from '@mui/material';
import { useFlowStore } from '../store/flowStore';
import { NodeType } from '../types/behaviorTree';
import { v4 as uuidv4 } from 'uuid';
import { LAYOUT_CONSTANTS } from '../constants/layout';

/**
 * @interface NodeToolbarProps
 * @description 节点工具栏组件的属性接口。
 */

/**
 * @function Toolbar
 * @description 行为树编辑器中的节点工具栏组件。
 * 提供了添加不同类型行为树节点的按钮。
 * @param {NodeToolbarProps} props - 组件属性。
 * @returns {React.FC} 节点工具栏组件。
 */
const Toolbar: React.FC = () => {
    const addNode = useFlowStore((state) => state.addNode);
    const applyLayout = useFlowStore((state) => state.applyLayout); // 获取 applyLayout action

    /**
     * @function handleAddNode
     * @description 处理添加新节点到画布的逻辑。
     * 根据传入的节点类型创建一个新节点，并调用 `addNode` action。
     * @param {NodeType} type - 要添加的节点类型。
     * @param {string} label - 节点的默认标签。
     */
    const handleAddNode = (type: NodeType, label: string) => {
        const newNode = {
            id: uuidv4(),
            type,
            position: LAYOUT_CONSTANTS.INITIAL_POSITION,
            data: { label },
        };
        addNode(newNode);
    };

    /**
     * @function handleAutoLayout
     * @description 处理自动布局功能。
     * 调用 `applyLayout` action 来重新组织画布上的节点。
     */
    const handleAutoLayout = () => {
        applyLayout();
    };

    return (
        <Box
            sx={{
                padding: 2,
                borderBottom: '1px solid #e0e0e0',
                display: 'flex',
                gap: 1,
                flexWrap: 'wrap',
                justifyContent: 'center',
            }}
        >
            <Tooltip title="添加序列节点">
                <Button
                    variant="contained"
                    onClick={() => handleAddNode(NodeType.Sequence, '序列')}
                >
                    序列
                </Button>
            </Tooltip>
            <Tooltip title="添加选择节点">
                <Button
                    variant="contained"
                    onClick={() => handleAddNode(NodeType.Selector, '选择')}
                >
                    选择
                </Button>
            </Tooltip>
            <Tooltip title="添加动作节点">
                <Button
                    variant="contained"
                    onClick={() => handleAddNode(NodeType.Action, '动作')}
                >
                    动作
                </Button>
            </Tooltip>
            <Tooltip title="添加条件节点">
                <Button
                    variant="contained"
                    onClick={() => handleAddNode(NodeType.Condition, '条件')}
                >
                    条件
                </Button>
            </Tooltip>
            <Tooltip title="添加装饰器节点">
                <Button
                    variant="contained"
                    onClick={() => handleAddNode(NodeType.Decorator, '装饰器')}
                >
                    装饰器
                </Button>
            </Tooltip>
            <Tooltip title="自动布局">
                <Button
                    variant="outlined" // 可以使用不同的变体来区分功能按钮
                    onClick={handleAutoLayout}
                    sx={{ marginLeft: 2 }} // 增加一些左边距以作区分
                >
                    自动布局
                </Button>
            </Tooltip>
        </Box>
    );
};

export default Toolbar;